<template>
  <div>
    <el-table  :data="tableData"    style="width: 100%">
      <el-table-column  type="index"  label="序号" width="40">
      </el-table-column>
      <el-table-column  prop="courseId"  label="课程编号">
      </el-table-column>
      <el-table-column  prop="courseName"  label="课程名称"></el-table-column>
      <el-table-column  prop="teacher.teacherRealname"  label="授课教师"></el-table-column>
      <el-table-column  prop="courseCreateDate"  label="添加日期" :formatter='dateFormat'></el-table-column>
      <el-table-column  label="操作">
        <template slot-scope="scope">
          <el-button type="primary"  size="small" @click.native="getDetial(scope.$index,scope.row)">详细信息</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination

      @current-change="handleCurrentChange"
        :current-page.sync="pageIndex"
        :page-size="pageSize"
        layout="prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <!-- 弹出框 -->
    <el-dialog title="章节信息" :visible.sync="dialogTableVisible">

      <el-table :data="sectionData"  max-height="250" >
        <el-table-column property="sectionId" label="章节编号" width="150"></el-table-column>
        <el-table-column   label="章节名称" width="200">
          <template slot-scope="scope">
            <el-button  type="text" @click.native="getParts(scope.$index,scope.row)"  size="medium ">{{scope.row.sectionName}}</el-button>
          </template>
        </el-table-column>
        <el-table-column property="sectionAddtime" label="添加时间" :formatter='dateFormat'></el-table-column>
      </el-table>

    </el-dialog>
  </div>
</template>

<script>
  import {listCourse,getCourseById} from '@/axios/api'
  import { formatDate } from '@/common/js/date.js'
  export default {
    data() {
      return {
        pageIndex:1,
        pageSize:10,
        total:50,
        tableData: [],
        sectionData:[],
        dialogTableVisible: false,
      }
    },
    methods:{
      //时间格式化
      dateFormat:(row, column) => {
        let date = row[column.property];
        if (date == undefined) {
          return "";
        }
        return formatDate(new Date(date), 'yyyy-MM-dd')
      },
      //
      getParts:function(index,row){
        this.$router.push({name:'小节信息',path:'/part_info',params:{sectionId:row.sectionId}});
      },
      //获取课程的章节信息
      getDetial:function(index,row){
        this.dialogTableVisible = true;
        let param = {
          courseId: row.courseId,
          pageIndex: this.pageIndex
        }
        getCourseById(param).then(res=>{
          this.sectionData = res.resData.list;
        })
      },

      handleCurrentChange(val) {
        this.pageIndex = val;
        this.getCourseMsg();
      },
      getCourseMsg:function(){
        let param = {pageIndex: this.pageIndex}
        listCourse(param).then(res => {
          this.pageSize = res.resData.pageSize;
          this.total = res.resData.total;
          this.tableData = res.resData.list;
        })
      }
    },
    mounted(){
      this.getCourseMsg();
    }
  }
</script>
